<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Calendar</title>
    <link rel="stylesheet" href="{{ url_for("static", filename="style.css") }}">
    <link rel="shortcut icon" type="image/x-icon" href="{{ url_for("static", filename="") }}favicon_{{ current_day }}.png" id="favicon">
    <meta name="viewport" content="width=400" />
</head>
<style>
 body {
  /*严格来说background-image要做浏览器兼容*/

  display: flex; /*将整个body定义为一个flex容器*/

  justify-content: center; /*将flex项目在容器中心对齐*/
  background-color: rgb(236, 195, 202);


}

.outbox {

  /*定义为弹性布局*/

  display: flex;



  /*规定定位类型*/

  position: relative;

  top: 50px;

  width: 1000px;

  height: 870px;



  /*其他效果*/

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
  border-radius: 10px;



}

.pic {

  background-image: url(static/side4.png);

  width: 700px;

  height: 870px;

  /*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/

  background-size: cover;

}

.rightbox {

  display: flex;

  justify-content: center; /*将felx项目--即下面的textbox在容器的水平中心*/

  align-items: center; /*将felx项目--即下面的textbox在容器的竖直中心*/



  width: 400px;

  height: 870px;

  background-color: white;
  border-radius: 10px;
  left: 117px;
top: 160px;
width: 400px;
height: 866px;
line-height: 20px;
border-radius: 12px 0px 62px 12px;
background-color: rgba(202, 121, 143, 1);
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: center;
box-shadow: 5px 2px 6px 0px rgba(188, 79, 114, 100);
font-family: Roboto;

}
.rt{
left: 116px;
top: 160px;
width: 35px;
height: 866px;
line-height: 20px;
border-radius: 12px 0px 0px 12px;
background-color: rgb(157, 86, 108);
text-align: center;
color:#DCDCDC	;
font-size: 24px;}


.textbox {
top: 20px;
left: 184px;
top: 258px;
width: 360px;
height: 257px;
line-height: 20px;
border-radius: 24px;
background-color: rgb(237, 237, 237);
text-align: center;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);



}
/* 
.todaybox {
top: 20px;
left: 184px;
top: 258px;
width: 418px;
height: 217px;
line-height: 20px;
border-radius: 24px;

text-align: center;
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
} */



.textbox .inputbox {

  /*按照box的元素从内到外设计*/

  width: 200px;

  padding: 10px;

  margin: 20px 30px;

  border-style: none;



.a {

    position: absolute;
    top: 50%;
    height: 40px;
    transform: translateY(-20px);
    margin: 0 20px;
    font-size: 40px;
    color: white;

    }


</style>
<body>
    <div class="outbox">
        <div id="statusbar" class="">Processing...</div>
        
        <div class="rightbox">
            <div class="rt"><p>{{ week }}</p></div>
            
            <div style="display: block;">
                <form action="/{{ calendar_id }}/search/" method="post">
                    <input type="text" name="keyword" value="">
                    <input type="submit">
                    {% if search_result[0] %}
                    {% for i in search_result %}
                    <br>{{i}}
                    {% endfor %}
                    {% endif %}
                </form>
                <span style="text-shadow:none;display: block; margin-bottom: 5px;font-weight: 700;color: white; font-size:large;"> {{current_year}}年{{current_month}}月{{current_day}}日</span>
                <span style="text-shadow:none;display: block;margin-bottom: 5px;font-weight: 700;color: white; font-size:large;"> {{ lunar_year }}</span>
                <br>
                <br>

                <div class="textbox" style="display: left;">
                    <div class="header" style="width:400px;">

                        <div>
                            {% if display_view_past_button %}
                            <input style="background:#FFA07A;border: 0;margin: 10px;padding: 5px 20px;color: #fff;font-weight: bold;border-radius: 3px;" id="toggle-past-events"  type="button" value="View Past" onclick="ToggleViewPastTasks();" />
                            {% endif %}
                        </div>
                        <div class="current-date" >
                            {{ weather }}
                            

                        </div>
                    </div>
                </div>
                <br>
                <div class="textbox">
                    今日课表：
                    {{table}}
                    <br>
                    <!-- 今天是：{{current_year}}年{{current_month}}月{{current_day}}日
                    <br>
                    今天是星期几：{{week_day}}
                    <br>
                    今天是第几周：{{week}}
                    <br> -->
                    {% if timer_normal %}
                    今天有什么事：
                    {% for year in timer_normal %}
                                {% for month in timer_normal[year] %}
                                    {% for day in timer_normal[year][month] %}
                                    {% for tasksss in timer_normal[year][month][day]["tasks"] %}
                        <p>
                        {% if timer_normal[year][month][day]["interval"]==0 %}
                        <div style="color: rgb(255, 0, 0);">
                             {{tasksss}} 就是今天
                        </div>
                        {% else %}
                        <div style="color: #000;">
                            距离 {{tasksss}} 还有  {{timer_normal[year][month][day]["interval"]}}  天
                        </div>
                        {% endif %}
                        
                           </p>
                        {% endfor %}
                        {% endfor %}
                        {% endfor %}
                            {% endfor %}
                    {% endif %}
                    <br>
                </div>
               


        </div>
    </div>
    

    <div class="cal-container" style="width:650px; float:left; padding:10px;">
          <div class="year-month" style="position: relative;width: 100%; height: 70px;">
              <div style="display: flex;flex-direction: column;position: absolute;top: 50%;left: 50%;width: 200px;height: 50px;transform: translate(-50%, -50%);text-align: center;letter-spacing: 3px;">

                  <input style="background-color: transparent;border:transparent; position: absolute;top: 50%;height: 40px;transform: translateY(-30px);margin: 0 -100px;font-size: 40px;color: white;" type="button" value="&lt;" onclick="window.location='{{ previous_month_link }}'" title="Previous month" />
                  <div class="pre">
                      <span style="text-shadow: rgb(121 121 121) 2px 2px 2px;display: block;font-weight: 700;color: white;font-size:20px;">{{ year }} {{ month_name}}</span>
                     
                      <input style=" background-color: transparent;border:transparent; position: absolute;top: 50%;height: 40px;transform: translateY(-30px);margin: 0 150px;font-size: 40px;color: white;"type="button" class="a" value="&gt;" onclick="window.location='{{ next_month_link }}'" title="Next month" />
                  </div>
                  </div>
        </div>
         {% if month != current_month or year != current_year %}
            <div>
                <a style="background:#FFA07A;border: 0;padding: 5px 20px;color: #fff;border-radius: 3px;cursor: pointer;" href="/{{ calendar_id }}/">返回</a>
            </div>
        {% endif %}
    <ul class="calendar-header" style="display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;padding: 0 2.5px;background-color: rgb(202, 202, 202);">
        {% for weekday_header in weekdays_headers %}
            <li class="weekday-header">{{ weekday_header }}</li>
        {% endfor %}
    </ul>

    <ul class="calendar" id="calendar">
        {% for day in month_days %}
        <!-- 遍历所有这一页的日期 -->
            <li
                {% if day.month != month %}
                    class="day othermonth"
                {% else %}
                    class="day"
                {% endif %}
                data-year="{{ day.year }}"
                data-month="{{ day.month }}"
                data-day="{{ day.day }}">

                {% if day.day == current_day and day.month == current_month and day.year == current_year %}
                        <span class="daynumber-current">
                {% else %}
                        <span class="daynumber">
                {% endif %}
                {{ day.day }}</span>
                <!-- 日期 -->
                <ul class="tasks">
                    <div>
                        <!-- {{ lunar }} -->
                        {{ lunar[day] }}
                        <!-- 此处是放农历的地方，但是都是在前端处理的，不能调用python -->
                    </div>
                    {% if day.month|string in tasks and day.day|string in tasks[day.month|string] %}
                        {% for task in tasks[day.month|string][day.day|string]|sort(attribute="start_time") %}
                        <div>
                            <!-- shi 如果在此处加上内容，每当有一个task会有一处输出 -->

                        </div>
                            <li
                                {% if day.month != month %}
                                    class="task greyed"
                                {% else %}
                                    class="task"
                                    style="background-color:{{ task["color"] }}"
                                {% endif %}
                                data-year="{{ day.year }}"
                                data-month="{{ day.month }}"
                                data-day="{{ day.day }}"
                                data-id="{{ task["id"] }}"
                                {% if "repetition_type" in task %}data-recurrent="1"{% endif %}>


                                {% if not task["is_all_day"] %}
                                    <span class="time">{{ task["start_time"] }}{% if task["start_time"] != task["end_time"] %} - {{ task["end_time"] }}{% endif %}</span>
                                    <!-- 显示时间 -->
                                {% endif %}
                                {{ task["title"] }}
                                <!-- 显示task的标题 -->
                                <p class="accordion-hidden">
                                    {{ task["details"]|task_details_for_markup|safe }}
                                    {% if day.month == month %}
                                        <a href="#"
                                            data-id="{{ task["id"] }}"
                                            data-year="{{ day.year }}"
                                            data-month="{{ day.month }}"
                                            data-day="{{ day.day }}"
                                            data-title="{{ task["title"]|replace("\"","") }}"
                                            class="button smaller remove-task"
                                            title="Remove task">x</a>
                                        {% if "repetition_type" in task %}
                                            <!-- <a href="#"
                                                data-id="{{ task["id"] }}"
                                                data-year="{{ day.year }}"
                                                data-month="{{ day.month }}"
                                                data-day="{{ day.day }}"
                                                data-title="{{ task["title"]|replace("\"","") }}"
                                                class="button smaller hide-recurrent-task"
                                                title="Hide this task ocurrence">H</a> -->
                                        {% endif %}
                                            <a href="/{{ calendar_id }}/{{ day.year }}/{{ day.month }}/{{ day.day }}/{{ task["id"] }}{% if "repetition_type" in task %}?repeats=1{% endif %}"
                                                class="button smaller edit-task"
                                                title="Edit task">E</a>
                                    {% endif %}
                                    {% if "repetition_type" in task %}
                                        <span class="button smaller recurrent-task" title="Recurent task">R</span>
                                    {% endif %}
                                </p>
                            </li>
                        {% endfor %}
                    {% endif %}
                </ul>
            </li>
        {% endfor %}
    </ul>
        <input style="border:transparent;background-color: rgba(188, 79, 114, 1);" type="button" class="pre" value="+" onclick="window.location='/{{ calendar_id }}/{{ year }}/{{ month }}/new_task'" title="New task" />
    </div>

    </div>
    <!-- <div style="width:650px; float:right; padding:20px;">
    </div> -->

<script type="text/javascript">
    var smallScreen = (Math.min(document.documentElement.clientWidth, window.innerWidth || 0) <= 650),
        moving = false,
        capturedMovementOffset = false,
        movingElement,
        movingTimeout,
        clicksCounter = 0,
        clicksTimeout;

    function ToggleDetails(target) {
        target.className = target.className === "accordion-hidden" ? "accordion-visible" : "accordion-hidden";
    };

    function ShowStatusbar() {
        document.getElementById("statusbar").className = "processing";
    };

    // function HideStatusbar() {
    //     document.getElementById("statusbar").className = "";
    // }

    function SetErrorStatusbar() {
        var statusbar = document.getElementById("statusbar");
        statusbar.innerHTML = "The action errored";
        statusbar.className = "error";
    };

    function DeleteTask(year, month, day, id, title) {
        if (confirm("Remove task '" + title + "'?") == true) {
            ShowStatusbar();
            fetch("{{ base_url }}/{{ calendar_id }}/" + year + "/" + month + "/" + day + "/" + id + "/",
              {
                method: "delete",
                credentials: "include"
              })
            .then(response => {
                if (response.status == 200) {
                    location.reload();
                } else {
                    SetErrorStatusbar();
                }
            });
        }
    };

    function DeleteTaskOcurrence(year, month, day, id, title) {
        if (confirm("Hide task ocurrence of '" + title + "'?") == true) {
            ShowStatusbar();
            fetch("{{ base_url }}/{{ calendar_id }}/" + year + "/" + month + "/" + day + "/" + id + "/hide/",
              {
                method: "post",
                credentials: "include"
              })
            .then(response => {
                if (response.status == 200) {
                    location.reload();
                } else {
                    SetErrorStatusbar();
                }
            });
        }
    }

    function readViewPastTasksSetting() {
        var targetName = "ViewPastTasks",
            allCookies = document.cookie.split(';');
        for(var i=0; i < allCookies.length; i++) {
            var cookie = allCookies[i];
            if (cookie.indexOf(targetName) > -1) {
                return cookie.substring(targetName.length + 1, cookie.length) !== "0";
            }
        }
        return true;
    };

    function ToggleViewPastTasks() {
        var expirationDate = new Date(),
            currentSetting = readViewPastTasksSetting();

        expirationDate.setTime(expirationDate.getTime() + 31536000000);
        document.cookie = "ViewPastTasks=" + (currentSetting ? "0" : "1") +
                          "; expires=" + expirationDate.toUTCString() + "; path=/";
        location.reload();
    };

    // function DragEnd() {
    //     moving = false;
    //     capturedMovementOffset = false;
    //     movingElement.onmouseup = null;
    //     movingElement.onmousemove = null;

    //     if (movingElement === null) {
    //         return;
    //     }

    //     Array.from(document.getElementsByClassName("day")).forEach(function(element) {
    //         if (element.className === "day") {
    //             var movingElementX = parseInt(movingElement.style.left.slice(0, -2)) + movingElement.clientWidth / 2;
    //             var movingElementY = parseInt(movingElement.style.top.slice(0, -2)) + movingElement.clientHeight / 2;
    //             if (element.offsetLeft <= movingElementX &&
    //                 movingElementX <= (element.offsetLeft + element.clientWidth) &&
    //                 element.offsetTop <= movingElementY &&
    //                 movingElementY <= (element.offsetTop + element.clientHeight)) {

    //                 if (movingElement.getAttribute("data-day") !== element.getAttribute("data-day")) {
    //                     var oldYear = movingElement.getAttribute("data-year");
    //                     var oldMonth = movingElement.getAttribute("data-month");
    //                     var oldDay = movingElement.getAttribute("data-day");
    //                     var newDay = element.getAttribute("data-day");
    //                     element.children[1].appendChild(movingElement);
    //                     movingElement.setAttribute("data-day", newDay);

    //                     var editTaskButton;
    //                     if (movingElement.children[0].className === "time") {
    //                         movingElement.children[1].children[0].setAttribute("data-day", newDay);
    //                         editTaskButton = movingElement.children[1].children[movingElement.children[1].children.length - 1];
    //                     } else {
    //                         movingElement.children[0].children[0].setAttribute("data-day", newDay);
    //                         editTaskButton = movingElement.children[0].children[movingElement.children[0].children.length - 1];
    //                     }

    //                     var url = editTaskButton.href;
    //                     var urlFragments = url.split("/");
    //                     urlFragments[urlFragments.length - 2] = newDay;
    //                     editTaskButton.href = urlFragments.join("/");
    //                     ShowStatusbar();
    //                     fetch("{{ base_url }}/{{ calendar_id }}/" + oldYear + "/" + oldMonth + "/" + oldDay + "/" +
    //                           movingElement.getAttribute("data-id") + "/",
    //                       {
    //                         method: "put",
    //                         headers: {
    //                             "Content-Type": "application/json"
    //                         },
    //                         credentials: "include",
    //                         body: newDay
    //                       })
    //                     .then(response => {
    //                         if (response.status == 200) {
    //                             // HideStatusbar();
    //                         } else {
    //                             SetErrorStatusbar();
    //                         }
    //                     });

    //                 }
    //             }
    //         }
    //     });
    //     resetMovingTimeout();
    //     movingElement.style.position = null;
    //     movingElement.style.width = null;
    //     movingElement.style.left = null;
    //     movingElement.style.top = null;
    //     movingElement = null;
    // };

    // function Dragging(e) {
    //     if (moving) {
    //         if (!capturedMovementOffset) {
    //             x = e.offsetX;
    //             y = e.offsetY;
    //             capturedMovementOffset = true;
    //         }
    //         posx = e.pageX - x;
    //         posy = e.pageY - y;
    //         this.style.left = posx + 'px';
    //         this.style.top = posy + 'px';
    //         if (movingTimeout) {
    //             resetMovingTimeout();
    //         }
    //         movingTimeout = window.setTimeout(DragEnd, 1500);
    //     }
    // };

    function resetMovingTimeout() {
        window.clearTimeout(movingTimeout);
        movingTimeout = undefined;
    };

    var hiddenValue, visibilityChangeEventName;
    if (typeof document.hidden !== "undefined") {
        hiddenValue = "hidden";
        visibilityChangeEventName = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
        hiddenValue = "msHidden";
        visibilityChangeEventName = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
        hiddenValue = "webkitHidden";
        visibilityChangeEventName = "webkitvisibilitychange";
    }

    // if (!smallScreen) {
    //     document.getElementById("calendar").onmousedown = function(eventData) {
    //         if (eventData.target.nodeName === "LI" && eventData.target.className === "task" &&
    //             !eventData.target.hasAttribute("data-recurrent")) {

    //             moving = true;
    //             movingElement = eventData.target;
    //             movingElement.onmouseup = DragEnd;
    //             movingElement.onmousemove = Dragging;
    //             movingElement.style.width = movingElement.clientWidth - 12 + "px";
    //             movingElement.style.position = "absolute";
    //         }
    //         return;
    //     };
    // }

    document.getElementById("calendar").onclick = function(eventData) {
        if (eventData.target.nodeName === "LI" && eventData.target.className === "day") {
            if (++clicksCounter == 1) {
                // Single click behaviour (nothing)
                clicksTimeout = setTimeout(function() { clicksCounter = 0; }, 300);
            } else {
                clearTimeout(clicksTimeout);
                clicksCounter = 0;
                window.location = "/{{ calendar_id }}/{{ year }}/{{ month }}/new_task?day=" +
                                    eventData.target.getAttribute("data-day");
            }
            return;
        }

        if (eventData.target.nodeName === "LI" && eventData.target.className === "task") {
            // If is not "all day" there will be a span containing the time before the content
            ToggleDetails(eventData.target.children[eventData.target.children.length - 1]);
            return;
        } else if (eventData.target.nodeName === "SPAN" && eventData.target.parentNode.nodeName === "LI"
                    && eventData.target.parentNode.className === "task") {
            // If is not "all day" there will be a span containing the time before the content
            ToggleDetails(eventData.target.parentNode.children[eventData.target.parentNode.children.length - 1]);
            return;
        }

        if (eventData.target.nodeName === "P" && (eventData.target.className === "accordion-hidden" ||
                                                    eventData.target.className === "accordion-visible")) {
            ToggleDetails(eventData.target);
            return;
        }

        if (eventData.target.nodeName === "A") {
            if (eventData.target.className.indexOf("remove-task") > -1) {
                DeleteTask(eventData.target.getAttribute("data-year"),
                        eventData.target.getAttribute("data-month"),
                        eventData.target.getAttribute("data-day"),
                        eventData.target.getAttribute("data-id"),
                        eventData.target.getAttribute("data-title"));
            } else {
                if (eventData.target.className.indexOf("hide-recurrent-task") > -1) {
                    DeleteTaskOcurrence(eventData.target.getAttribute("data-year"),
                                    eventData.target.getAttribute("data-month"),
                                    eventData.target.getAttribute("data-day"),
                                    eventData.target.getAttribute("data-id"),
                                    eventData.target.getAttribute("data-title"));
                }
            }
        }

        return;
    };
</script>
</body>
</html>
